<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh">
<head>
<title>数据处理中心</title>

<%@include file="/WEB-INF/views/commons/common.jsp" %>

<link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/jquery-easyui/1.4.3/themes/metro/easyui.css">
<link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/bootstrap-dialog3/css/bootstrap-dialog.css">
<link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/validation-engine/validationEngine.jquery.css">
<link rel="stylesheet" type="text/css" href="${base_href}/static/css/search-theme.css">
<link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/layui-v2.3.0/layui/css/layui.css">

</head>
<body  data-grid="easyui">
	<div class="path"><span class="right-index">&gt;</span>  现在的位置：数据处理中心</div>
<div class="tab-content">
	<div class="fold_ex">
		<h2 class="title-h2">
			<span style="width:100%;">
				<button type="button" class="btn search-btn" data-method="insert"><i class="fa fa-plus"></i>&nbsp;录入题目&nbsp;</button>
				<button type="button" class="btn search-btn" data-method="edit"><i class="fa fa-edit"></i>&nbsp;编辑&nbsp;</button>
				<button type="button" class="btn search-btn" id="uploadQuestion"><i class="fa fa-upload"></i>&nbsp;批量上传&nbsp;</button>
			</span>
			<a href="javascript:void(0);" class="hide-next-btn">收起</a>
		</h2>
		
		<div>
		<form action="#">
			<table class="search-table container">
				<tr>
					<td class="text-right col-xs-2">问题关键字</td>
					<td class="col-xs-4">
						<input type="text" class="form-control" name="keyword" value="" />
					</td>
					<td class="text-right col-xs-2">序号</td>
					<td class="col-xs-4">
						<input type="text" class="form-control" name="quesNo" value="" />
					</td>
				</tr>
				<tr>
					<td class="text-right col-xs-2">所属专业</td>
					<td class="col-xs-4">
						<select name="major" class="form-control">
							<option value="">请选择</option>
							<c:forEach items="${majors}" var="state">
								<option value="${state.code}">${state.value}</option>
							</c:forEach> 
						</select>
					</td>
					<td class="text-right col-xs-2">所属科目</td>
					<td class="col-xs-4">
						<select name="subject" class="form-control">
							<option value="">请选择</option>
							<c:forEach items="${subjects}" var="state">
								<option value="${state.code}">${state.value}</option>
							</c:forEach> 
						</select>
					</td>
				</tr>
			
				<tr>
					<td class="text-right col-xs-2"></td>
					<td class="text-right">
						<button type="button" class="btn search-btn" data-method="search"><i class="fa fa-search"></i>&nbsp;查询&nbsp;</button>
						<button type="button" class="btn search-btn" data-method="clear"><i class="fa fa-trash"></i>&nbsp;清空&nbsp;</button>
					</td>
				</tr>
			</table>
		</form>
		</div>

		<hr class="search-line"/>
		<table class="easyui-datagrid" >
			<thead>
				<tr>
					<th data-options="field:'id',checkbox:true">选择</th>
					<th data-options="field:'quesNo',width:20,align:'center'">序号</th>
					<th data-options="field:'uploadName',width:30,align:'center'">上传人</th>
					<th data-options="field:'question',width:100,align:'center'">问题</th>
					<th data-options="field:'answer',width:150,align:'center'">答案</th>
					<th data-options="field:'relatedQuestion',width:50,align:'center'">关联题目</th>
					<th data-options="field:'major',width:20,align:'center'">专业</th>
					<th data-options="field:'subject',width:20,align:'center'">科目</th>
				</tr>
			</thead>
		</table>
	</div>
</div>

<script type="text/javascript" src="${base_href}/static/ui-frame/jquery/1.11.3/jquery.js"></script>


<script type="text/javascript" src="${base_href}/static/ui-frame/iframe-auto-height/jquery.autoheight.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/bootstrap/3.3.5/js/bootstrap.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/bootstrap-dialog3/js/bootstrap-dialog.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/jquery-easyui/1.4.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/jquery-easyui/1.4.3/easyui.util.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/validation-engine/jquery.validationEngine-zh_CN.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/validation-engine/jquery.validationEngine.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/webuploader/jquery-form.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/layui-v2.3.0/layui/layui.js"></script>

<script type="text/javascript" src="${base_href}/static/ui-frame/requirejs/2.2.0/require.js"></script>

<script type="text/javascript">
requirejs.config({
    baseUrl: '<c:url value="/static/"/>',
    paths: {
        Grid: 'component/grid/js/ms-grid',
    },
    config: {
    	'Grid': { contextPath: '<c:url value="/"/>' },
    }
});


require(['Grid'], function(Grid) {
	
	Grid.columns({
		question: {
			formatter: function(value, row, index) {
				var v = value == null ? "" : $('<div/>').text(value).html();
				return "<a style='color: #337ab7' href='javaScript:void(0);' onclick=\"grid.question(event, " + index + ")\" class='grid-button' plain='true' title='"+ v +"'><div>" +  v + "</div></a>";
			},
			event: function(event, index) {
				var row = this.grid.datagrid('getRows')[index];
				var param = {id: row.id};
				
				var url = basePath + "/dataCleaning/readPage.html?" + $.param(param);
				var screenLocation = "width=960px,height=960,top=0,left=0,menubar=yes,resizable=yes,scrollbars =yes";
				this.windowOpen(url, "详细信息",screenLocation); //打开题目只读页面
				event.stopPropagation();
			}
		},
		answer:{
			formatter: function(value, row, index) {
				var v = value == null ? "" : $('<div/>').text(value).html();
				return "<div title='"+ v +"'>" + v + "</div>";
			}
		},
		relatedQuestion:{
			formatter: function(value, row, index) {
				var v = value == null ? "" : $('<div/>').text(value).html();
				return "<div title='"+ v +"'>" + v + "</div>";
			}
		}
	});
	Grid.methods({
		insert:function(){
			var url = basePath + "/dataCleaning/draft";
			var screenLocation = "width=960px,height=960,top=0,left=0,menubar=yes,resizable=yes,scrollbars =yes";
			this.windowOpen(url, "详细信息",screenLocation);
		},
		edit:function(){
			var _checked = this.grid.datagrid('getChecked');
			if (_checked.length == 1) {
				var param = {id: _checked[0].id};
				var url = basePath + "/dataCleaning/editPage.html?" + $.param(param);
				var screenLocation = "width=960px,height=960,top=0,left=0,menubar=yes,resizable=yes,scrollbars =yes";
				this.windowOpen(url, "详细信息",screenLocation);
			}else{
				BootstrapDialog.alert("请选择一条题目信息!");
			}
		}
	});
	
	$(function() {
		layui.use(['upload','element','layer'], function(){
			var url = basePath + "/import/uploadQuestions";
			var upload = layui.upload,element = layui.element,layer = layui.layer;
			upload.render({
				  elem: '#uploadQuestion'
				, url: url
				, accept: 'file'
				, exts: 'xls|xlsx'
				, progress: function(e , percent) {
					console.log("进度：" + percent + '%');
					element.progress('progressBar',percent + '%');
				}
				, before: function(){
					$(".layui-progress").show();
				}
				, done: function(res, index, upload){
					//假设code=2000代表上传成功
					if(res.code == 2000){
						layer.msg(res.message);
						$("button[data-method='search']").click();
					}
					else{
						layer.alert(res.message)
					}
					$(".layui-progress").hide();
					$(".layui-progress-bar").attr("lay-percent","0%")
				}
				, error:function(a,b,c){
					console.log(a);
					layer.alert("上传失败，请联系管理员")
				}
			})
		});
		window.grid = Grid.events();
	})
}) 
</script>


</body>
</html>
